<template>
  <div class="notice">
    <div class="poz">
      <svg-icon icon-class="news" @click="click" />
      <div class="point" v-show="noticeTip"></div>
    </div>
  </div>

</template>
<script>

import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('settings')
export default {
  computed: {
    ...mapState(['noticeTip']),
  },
  // watch: {
  //   noticeTip(show) {
  //     if (show) {
  //       console.log('showshow---------')
  //     } else {
  //       console.log('hideshow---------')
  //     }
  //   },
  // },
  methods: {
    click() {
      this.$eventBus.$emit('showNoticeDialog')
      // this.$store.dispatch('settings/changeSetting', {
      //     key: 'showSettings',
      //     value: true
      // })
      // this.$store.dispatch('settings/changeNotification', {
      //     key: 'showNotification',
      //     value: true
      // })
    }
  }
}
</script>

<style scoped>
.notice{
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.poz {
  position: relative;
  border-radius: 50%;
  border:1px solid rgb(242,243,245);
  padding:6px;
  width: 32px;
  height:32px;
}
.point {
  position: absolute;
  left: 24px;
  width: 5px;
  top: 1px;
  height: 5px;
  border-radius: 50%;
  background: #ff6158;
}
</style>
